import { Component, OnInit, Input, OnChanges, ElementRef, ViewChild } from '@angular/core';
import { AttachAddon } from 'xterm-addon-attach';
import {Terminal} from 'xterm';
import { GitPipelinetask } from '@api/git';
@Component({
  selector: 'kd-logshower',
  templateUrl: './logshower.component.html',
  styleUrls: ['./logshower.component.scss']
})
export class LogshowerComponent implements OnInit,OnChanges {
 
  // options = {
  //   theme: 'vs-dark',
  //   readOnly : true ,
  // };
  terminal = new Terminal({
    fontSize: 20,
    fontFamily: 'Consolas, "Courier New", monospace',
    bellStyle: 'sound',
    cursorBlink: true,
    cols:200,
    cursorWidth:1500,
    convertEol:true,
  });
  
  @ViewChild('anchor', {static: true}) 
  anchorRef: ElementRef;
  socket_url = "ws://192.168.137.200:9000/git/log";
  docker_url =  "ws://192.168.137.200:9000/git/logdocker";
  code ="waiting to load the log file..."
  _hash :string ;
  _mname:string;  
  private _logid:string ="";
  private _weboscket :WebSocket;
  _dockerfile:string = "";
  @Input('logid')
  set logid(logid:string){
    
      this._logid = logid 
  }
  @Input('hash')
  set hash(dirname :string){
    this._hash = dirname 
  }
  @Input('module_name')
  set module_name(name :string){
    this._mname = name 
  }
  constructor() { }

  ngOnInit(): void {
  }

  ngOnChanges(): void {
    this.anchorRef.nativeElement.innerHTML = ""
    if (this._logid.length< 10){
      
      this._weboscket = new WebSocket(this.docker_url+"?hash="+this._hash+"&name="+this._mname);
    }else{
      this._weboscket = new WebSocket(this.socket_url+"/"+this._logid);
    }
    
    this._weboscket.onmessage= (evt) =>{
      this.code = evt.data;
    };
    this.terminal.clear()
    this.terminal.loadAddon(new AttachAddon(this._weboscket) )
    this.terminal.open(this.anchorRef.nativeElement);
  }
}
